<template>
  <div class="upload">
    <!-- params 配置说明 -->
    <!--
      url：上传地址
      type：上传类型  btn:按钮上传   list:缩略图上传
      btnType：按钮样式
      btnIcon：按钮图标
      btnName：按钮名称
      width：按钮宽度
      display：显示列表  none
      data：参数
      showList：是否展示上传列表  true
      limit：上传个数限制
      multiple：是否多选
      drag：是否支持拖拽  false
      disabled：是否禁用  false
      fileType:[] 上传格式 ['jpg','png','gif','jpeg','zip','rar','','']
    -->

    <!-- 按钮上传图片 -->
    <div v-if="params.type=='btn'" class="uploadBtn">
      <el-button :type="params.btnType?params.btnType:'primary'" :icon="params.icon" @click="btnUpload()"
        size="mini" :disabled="disabled1" :style="{width:params.width+'px'}">
        {{params.btnName?params.btnName:'上传'}}
      </el-button>
      <el-upload ref="btnUpload" :headers="headers" :action="params.url"
        :style="{display:params.display?params.display:'none'}"
        :file-list="fileList1" :show-file-list="params.showList" :data="params.data"
        :drag="params.drag" :multiple="params.multiple" :limit="params.limit"  :before-upload="beforeUpload"
        :on-change="onChange1" :on-success="onSuccess1" :on-remove="onRemove1" :on-preview="onPreview1">
      </el-upload>
    </div>

    <!-- 缩略图列表上传图片 -->
    <div v-else-if="params.type=='list'">
      <el-upload ref="listUpload" list-type="picture-card" :headers="headers"
        :action="params.url" :class="{hide:hide}" :data="params.data"
        :file-list="fileList2" :limit="params.limit" :disabled="disabled2" :before-upload="beforeUpload"
        :on-change="onChange2" :on-success="onSuccess2" :on-preview="onPreview2" :on-remove="onRemove2">
        <!-- 加号图案 -->
        <!-- <i slot="default" class="el-icon-plus"></i> -->
        <!-- 相机图案 -->
        <i class="el-icon-camera-solid"></i>
      </el-upload>
    </div>

    <!-- 预览图片弹窗 -->
    <el-dialog :title="imgModal.title" :visible="imgModal.isShow">
      <img width="100%" :src="imgModal.imgUrl">
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "upload",
  props: {
    params:{
      type: Object,
      required: true,
      default: () =>{}
    },
    imgListData:{
      type: Array,
      default: () =>[]
    },
    disabled:{
      type: Boolean,
    }
  },
  data () {
    return {
      // 请求头token
      headers: {'Auth-Token': 'vlVwiSwMnvzL/175QmV2YliHoe94Vo8fT+uEeUcfciCeAhgwPHhNiQ=='},
      // btn
      disabled1:false,
      fileList1:[],
      // list
      hide: false,//缩略图隐藏上传按钮
      fileList2:[],
      disabled2:false,
      isChecked:true,

      //预览弹窗
      imgModal:{
        show: false,
        title: '预览图片',
        imgUrl: ""
      },
    }
  },
  watch: {
    imgListData(){
      if(this.imgListData.length>0){
        this.handlefileList();
      }
    },
  },
  mounted () {},
  methods: {
    /************* 按钮上传图片 *************/
    // 打开上传
    btnUpload(){
      this.$refs['btnUpload'].$children[0].$refs.input.click();
    },
    // 上传成功
    onSuccess1(res,file,fileList){
      this.fileList1 = fileList;
      res.data.name = file.name;
      this.$emit("fileList",res.data);
    },
    onChange1(file,fileList){
      this.disabled1 = this.fileList1.length >= this.params.limit;
    },
    // 删除
    onRemove1(file,fileList){
      this.fileList1 = fileList;
      this.$emit('removeFile',file.response);
    },
    // 预览
    onPreview1(file){
      this.$emit('preview',file);
    },

    /************* 缩略图上传图片 *************/
    // 上传成功
    onSuccess2(res,file,fileList){
      this.fileList2 = fileList;
      res.data.name = file.name;
      this.$emit("imgList",res.data);
    },
    // 达到上传限制，隐藏上传入口
    onChange2(file,fileList){
      this.hide = this.fileList2.length >= this.params.limit;
    },
    // 删除
    onRemove2(file,fileList){
      this.fileList2 = fileList;
      this.hide = this.fileList2.length >= this.params.limit;
      let imgUrl = file.response ? file.response.data.fileByteUrl : file.url;
      const data = {name:file.name, url:imgUrl};
      this.$emit('removeImg',data);
    },
    // 预览
    onPreview2(file){
      this.imgModal.imgUrl = file.response ? file.response.data.fileByteUrl : file.url;
      this.imgModal.show = true;
    },
    // 图片
    handlefileList(){
      this.fileList2 = [];
      if(this.imgListData.length>0){
        this.imgListData.forEach(item =>{
          this.fileList2.push({
            url: item.url,
          })
        })
        this.hide = this.fileList2.length >= this.params.limit;
      } else {
        this.fileList2 = [];
        this.hide = false;
      }
    },


    /************* 公共方法 *************/
    // 图片校验
    beforeUpload(file){
      let name = file.name.split('.')[0];
      let type = file.name.split('.')[1];
      let fileType = this.params.fileType?this.params.fileType:['jpg','png','jpeg'];
      let regFileName = /^\w+$/g;
      let regOtherName = /^[\u4E00-\u9FA5a-zA-Z0-9_-]{3,20}$/;
      // 文件名校验：大小写字母、数字、下划线
      if(!regFileName.test(name)){
        this.$Message.error("文件名只能包含数字、字母、下划线，请上传正确的文件名！");
        this.isChecked = false;
        return false
      }
      // 格式校验
      else if(fileType.indexOf(type) == -1){
        this.$Message.error("仅支持"+fileType.toString()+"格式，请上传正确的格式！");
        this.isChecked = false;
        return false
      }
      // 大小校验：100M
      else if((file.size / (1024 * 1024)) > 100) {
        this.$Message.error("请上传小于100MB的文件");
        this.isChecked = false;
        return false
      }
    },
  },
  filters: {}
}
</script>

<style lang="less" scoped>
.upload{
  width: 100%;
  .uploadBtn {
    width: 100%;
  }
  .fileClass{
    position: relative;
  }
  .hide{
    position: relative;
  }
}
/deep/ .el-button [class*=el-icon-]+span{
  margin-left: 0 !important;
}
// /deep/ .el-upload-list{
//   // position: absolute;
//   // top: 0px;
//   // left: 0px;
// }
/deep/ input[type=file]{
  display: none !important;
}
</style>